<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>智慧工地管理平台</title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="./lib/dialog/jquery-confirm.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/base.css" />
  </head>

  <body>
    <!-- header start -->
    <div class="header clearfix">
      <div class="left">
        <div class="logo"></div>
        <h3 class="slogan">南京市六合区智慧工地监管平台</h3>
      </div>
      <div class="right">
        <p class="info">2019年3月21日</p>
        <p class="info">星期四</p>
        <p class="info">温度：12℃</p>
      </div>
    </div>
    <!-- header end -->
    <div class="container">
      <!-- menu start -->
      <ul class="aside-menu">
        <li class="item active">
          <span>视频监控</span>
        </li>
        <li class="item">
          <span>扬尘噪声监测</span>
        </li>
        <li class="item">
          <span>车辆冲洗抓拍</span>
        </li>
        <li class="item">
          <span>实名制通道管理</span>
        </li>
        <li class="item">
          <span>智能安全帽管理</span>
        </li>
        <li class="item">
          <span>吊塔安全管理</span>
        </li>
        <li class="item">
          <span>升降机安全监测</span>
        </li>
        <li class="item">
          <span>支模脚手架监测</span>
        </li>
        <li class="item">
          <span>基坑检测</span>
        </li>
        <li class="item">
          <span>菜单管理</span>
        </li>
      </ul>
      <!-- menu end -->

      <!-- content start -->
      <div class="content no-bg sct-dashboard">
        <!-- panel-left start -->
        <div class="panel-left">
          <div class="sct-title">
            <div class="inner">
              <span>江苏地图</span>
            </div>
          </div>
          <!-- sct-table start -->
          <div class="sct-table" style="display: flex;">
            <div id="container" style="flex:1;"></div>
          </div>
          <!-- sct-table end -->
        </div>
        <!-- panel-left end -->
        <!-- panel-right start -->
        <div class="panel-right">
          <div class="panel-top">
            <!-- sct-table start -->
            <div class="top-left">
                <div class="top-left-stitle">
                  总览数据
                </div>
                <div class="top-left-content">
                    <div class="item">
                      <p class="title">项目总数（个）：</p>
                      <p class="time">1000</p>
                    </div>
                    <div class="item">
                      <p class="title">总投资额（亿）：</p>
                      <p class="time">57</p>
                    </div>
                    <div class="item">
                      <p class="title">覆盖地区（个）：</p>
                      <p class="time">21</p>
                    </div>
                </div>
            </div>
            <div class="top-right">
                <div class="top-right-stitle">
                  政策文件
                </div>
                <div class="top-right-content">
                    <ul>
                        <li>
                          <p class="title">汽车涡轮增压器 | 日志</p>
                          <p class="time">2018-09-12</p>
                        </li>
                        <li>
                          <p class="title">汽车涡轮增压器 | 日志</p>
                          <p class="time">2018-09-12</p>
                        </li>
                        <li>
                          <p class="title">汽车涡轮增压器 | 日志</p>
                          <p class="time">2018-09-12</p>
                        </li>
                        <li>
                          <p class="title">汽车涡轮增压器 | 日志</p>
                          <p class="time">2018-09-12</p>
                        </li>
                        <li>
                          <p class="title">汽车涡轮增压器 | 日志</p>
                          <p class="time">2018-09-12</p>
                        </li>
                      </ul>
                </div>
            </div>
            <!-- sct-table end -->
          </div>
          <div class="panel-bottom">
            <div class="sct-title">
              <div class="inner">
                <span>扬尘报警</span>
                <span>噪声报警</span>
                <span>车辆洗轮报警</span>
                <a class="more" href="#">查看更多</a>
              </div>
            </div>
            <!-- sct-table start -->
            <div class="sct-table">
              <ul class="policy-list">
                <li class="item" id="item1"></li>
                <li class="item" id="item2"></li>
                <li class="item" id="item3"></li>
              </ul>
            </div>
            <!-- sct-table end -->
          </div>
        </div>
        <!-- panel-right end -->
      </div>
      <!-- content end -->
      <div class="footer"><p class="cp">主办单位：南京市六合区建筑工程安全监督站</p></div>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./lib/dialog/jquery-confirm.min.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=bfe621356697a393930a4760c561d9bb"></script>
    <script>
      var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 10, //初始化地图层级
        center: [118.802422, 32.0671], //初始化地图中心点
      });
      var creatPoint = function(point, isWarn) {
        var icon = isWarn ? './images/icn-error.png' : './images/icn-normal.png';
        point = point.split(',');
        var marker = new AMap.Marker({
          position: new AMap.LngLat(point[0], point[1]),
          icon: icon,
          offset: new AMap.Pixel(-13, -30),
        });
        if (map) {
          map.add(marker);
        }
      };

      //  setTimeout(() => {
      //   var d = $.alert({
      //     content: '<div class="text-center" >test</div>',
      //     title: false, // hides the title.
      //     closeIcon: false, // hides the close icon.
      //     columnClass: 'xsmall',
      //     onOpen: function() {
      //       // setTimeout(function() {
      //       //   d.close();
      //       // }, 400);
      //     },
      //   });
      //  }, 2000);

      // var d = $.alert({
      //   title: 'Alert!',
      //   content: 'Simple alert!',
      //   buttons: {
      //     ok: {
      //       text: '我知道了',
      //     },
      //   },
      // });

      // setTimeout(function() {
      //   d ? d.close() : null;
      // }, 5000);

      function warmMessage(msg) {
        var d = $.alert({
          title: '警告',
          content: msg,
          buttons: {
            ok: {
              text: '我知道了',
            },
          },
        });
        setTimeout(function() {
          d ? d.close() : null;
        }, 5000);
      }

      // $.confirm({
      //   title: '确认?',
      //   content: '是否提交?',
      //   buttons: {
      //     ok: {
      //       text: '确认',
      //       btnClass: 'btn btn-primary',
      //     },
      //     close: {
      //       text: '关闭',
      //       btnClass: 'btn btn-default',
      //     },
      //   },
      // });

      setTimeout(function() {
        creatPoint('118.75068,32.005392', true);
        creatPoint('119.029514,31.995103', true);
        creatPoint('118.604651,32.028904', true);
        creatPoint('118.700087,32.160073');
        creatPoint('118.647195,32.056329');
        creatPoint('118.803572,32.185991');
        creatPoint('118.908206,32.138551');
      }, 1000);
    </script>
    <!-- 引入 ECharts 文件 -->
    <script src="./js/echarts.min.js"></script>
    <script>
      function drawTu(){

      }
      // 绘制图表
      var option1 = {
          title: {
            text: '扬尘监测',
            x: "center",
            textStyle: {
              color: "#fff"
            }
          },
          tooltip: {},
          legend: {
            show: true,
            x: 'right',
            y: 'center',
            orient: 'vertical',
            align:'left',
            data: [
              {
                name:'PM10',
                icon:'circle'
              },
              {
                name:'PM2.5',
                icon:'circle',
                
              },{
                name:'噪声',
                icon:'circle',
                textStyle: {
                  color: "#f00"
                }
              }
            ]
          },
          xAxis: {
              data: ['1', '2', '3', '4', '5', '6'],
              axisLabel: {
                textStyle: {
                  color: '#fff'
                }
              },
              //设置网格线颜色
              splitLine: {
                  show: true,
                  lineStyle:{
                    color: ['#315070'],
                    width: 1,
                    type: 'dashed'
                }
          　　},
            // y轴的颜色和宽度
            axisLine:{
              lineStyle:{
                color:'#fff',
                width:1,
              }
            }
          },
          yAxis: {
            //设置坐标轴字体颜色和宽度
            axisLabel: {
              textStyle: {
                color: "#fff",
              }
            },
            //设置网格线颜色
            splitLine: {
                  show: true,
                  lineStyle:{
                    color: ['#315070'],
                    width: 1,
                    type: 'dashed'
                }
          　　},
            // y轴的颜色和宽度
            axisLine:{
              lineStyle:{
                color:'#fff',
                width:1,
              }
            }
          },
          series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20],
              axisLabel: {
                textStyle: {
                  color: '#f00',//坐标值得具体的颜色
                }
              }
          }]
      };
      

      // 绘制图表
      var option2 = {
          title: {
            text: 'PM2.5监测',
            x: "center",
            textStyle: {
              color: "#fff"
            }
          },
          tooltip: {},
          legend: {
            show: true,
            x: 'right',
            y: 'center',
            orient: 'vertical',
            align:'left',
            data: [
              {
                name:'PM10',
                icon:'circle'
              },
              {
                name:'PM2.5',
                icon:'circle',
                
              },{
                name:'噪声',
                icon:'circle',
                textStyle: {
                  color: "#f00"
                }
              }
            ]
          },
          xAxis: {
              data: ['1', '2', '3', '4', '5', '6'],
              axisLabel: {
                textStyle: {
                  color: '#fff',//坐标值得具体的颜色
                }
              },
              //设置网格线颜色
              splitLine: {
                  show: true,
                  lineStyle:{
                    color: ['#315070'],
                    width: 1,
                    type: 'dashed'
                }
          　　},
            // x轴的颜色和宽度
            axisLine:{
              lineStyle:{
                color:'#fff',
                width:1,
              }
            }
          },
          yAxis: {
            //设置坐标轴字体颜色和宽度
            axisLabel: {
              textStyle: {
                color: "#fff",
              }
            },
            //设置网格线颜色
            splitLine: {
                  show: true,
                  lineStyle:{
                    color: ['#315070'],
                    width: 1,
                    type: 'dashed'
                }
          　　},
            // y轴的颜色和宽度
            axisLine:{
              lineStyle:{
                color:'#fff',
                width:1,
              }
            }
          },
          series: [{
              name: '销量',
              type: 'line',
              data: [5, 3, 36, 10, 2, 20]
          }]
      };

      // 绘制图表
      var option3 = {
          title: {
            text: 'PM10监测',
            x: "center",
            textStyle: {
              color: "#fff"
            }
          },
          tooltip: {},
          legend: {
            show: true,
            x: 'right',
            y: 'center',
            orient: 'vertical',
            align:'left',
            data: [
              {
                name:'PM10',
                icon:'circle'
              },
              {
                name:'PM2.5',
                icon:'circle',
                
              },{
                name:'噪声',
                icon:'circle',
                textStyle: {
                  color: "#f00"
                }
              }
            ]
          },
          xAxis: {
              data: ['1', '2', '3', '4', '5', '6'],
              axisLabel: {
                textStyle: {
                  color: '#fff',//坐标值得具体的颜色
                }
              },
              //设置网格线颜色
              splitLine: {
                  show: true,
                  lineStyle:{
                    color: ['#315070'],
                    width: 1,
                    type: 'dashed'
                }
          　　},
            // x轴的颜色和宽度
            axisLine:{
              lineStyle:{
                color:'#fff',
                width:1,
              }
            }
          },
          yAxis: {
            //设置坐标轴字体颜色和宽度
            axisLabel: {
              textStyle: {
                color: "#fff",
              }
            },
            //设置网格线颜色
            splitLine: {
                  show: true,
                  lineStyle:{
                    color: ['#315070'],
                    width: 1,
                    type: 'dashed'
                }
          　　},
            // y轴的颜色和宽度
            axisLine:{
              lineStyle:{
                color:'#fff',
                width:1,
              }
            }
          },
          series: [{
              name: '销量',
              type: 'line',
              data: [5, 20, 36, 10, 10, 20]
          }]
      };
      $("#item1").css("display", "block");
      $("#item2").css("display", "none");
      $("#item3").css("display", "none");
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('item1'));
      myChart.setOption(option1); 
      $(".inner span").click(function(){
        if($(this).html()=='扬尘报警'){
          $("#item1").css("display", "block");
          $("#item2").css("display", "none");
          $("#item3").css("display", "none");
          $(".inner span").css("background-color", "");
          $(this).css("background-color", "#005ea0");
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('item1'));
          myChart.setOption(option1); 
        }
        else if($(this).html()=='噪声报警'){
          $("#item1").css("display", "none");
          $("#item2").css("display", "block");
          $("#item3").css("display", "none");
          $(".inner span").css("background-color", "");
          $(this).css("background-color", "#005ea0");
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('item2'));
          myChart.setOption(option2);
        }else{
          $("#item1").css("display", "none");
          $("#item2").css("display", "none");
          $("#item3").css("display", "block");
          $(".inner span").css("background-color", "");
          $(this).css("background-color", "#005ea0");
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('item3'));
          myChart.setOption(option3);
        }
      });

    </script>
  </body>
</html>
